<template>
  <view class="comment-container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="nav-back" @click="goBack">
        <text class="back-icon">‹</text>
      </view>
      <text class="nav-title">意见反馈</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 主要内容 -->
    <view class="main-content">
      <!-- 手机号码输入 -->
      <view class="form-section">
        <view class="form-label">
          <text class="label-text">手机号码</text>
        </view>
        <view class="input-group">
          <input
            class="input-field"
            type="number"
            placeholder="请填写手机号码，方便我们与你联系"
            v-model="formData.phone"
            maxlength="11"
          />
        </view>
      </view>

      <!-- 意见建议输入 -->
      <view class="form-section">
        <view class="form-label">
          <text class="label-text">意见建议</text>
        </view>
        <view class="textarea-group">
          <textarea
            class="textarea-field"
            placeholder="请填写您的意见"
            v-model="formData.content"
            maxlength="250"
            auto-height
            :show-confirm-bar="false"
          ></textarea>
          <view class="char-count">
            <text class="count-text">{{ formData.content.length }}/250</text>
          </view>
        </view>
      </view>

      <!-- 文件上传 -->
      <view class="form-section">
        <view class="form-label">
          <text class="label-text">上传附件</text>
          <text class="label-desc">（最多3张）</text>
        </view>
        <view class="upload-section">
          <!-- 已上传的图片 -->
          <view class="uploaded-images">
            <view 
              class="image-item" 
              v-for="(image, index) in uploadedImages" 
              :key="index"
            >
              <image 
                class="uploaded-image" 
                :src="image.url" 
                mode="aspectFill"
                @click="previewImage(image.url)"
              ></image>
              <view class="delete-btn" @click="deleteImage(index)">
                <text class="delete-icon">×</text>
              </view>
            </view>
          </view>
          
          <!-- 上传按钮 -->
          <view 
            class="upload-btn" 
            @click="chooseImage"
            v-if="uploadedImages.length < 3"
          >
            <text class="upload-icon">📷</text>
            <text class="upload-text">添加图片</text>
          </view>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-section">
        <button 
          class="submit-btn"
          :class="{ 'btn-disabled': !canSubmit }"
          :disabled="!canSubmit"
          @click="handleSubmit"
        >
          <text class="btn-text">提交</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'

// 表单数据
const formData = reactive({
  phone: '',
  content: ''
})

// 上传的图片列表
const uploadedImages = ref([])

// 计算属性 - 是否可以提交
const canSubmit = computed(() => {
  return formData.phone.trim() && formData.content.trim()
})

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 选择图片
const chooseImage = () => {
  const remainingCount = 3 - uploadedImages.value.length
  
  uni.chooseImage({
    count: remainingCount,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePaths = res.tempFilePaths
      
      tempFilePaths.forEach((filePath) => {
        // 这里可以上传到服务器，现在先模拟本地显示
        uploadedImages.value.push({
          url: filePath,
          name: `image_${Date.now()}.jpg`
        })
      })
      
      uni.showToast({
        title: `已添加${tempFilePaths.length}张图片`,
        icon: 'success'
      })
    },
    fail: (err) => {
      console.log('选择图片失败：', err)
    }
  })
}

// 删除图片
const deleteImage = (index) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除这张图片吗？',
    success: (res) => {
      if (res.confirm) {
        uploadedImages.value.splice(index, 1)
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
      }
    }
  })
}

// 预览图片
const previewImage = (url) => {
  const urls = uploadedImages.value.map(img => img.url)
  uni.previewImage({
    current: url,
    urls: urls
  })
}

// 表单验证
const validateForm = () => {
  if (!formData.phone.trim()) {
    uni.showToast({
      title: '请填写手机号码',
      icon: 'none'
    })
    return false
  }
  
  if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
    uni.showToast({
      title: '请填写正确的手机号码',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.content.trim()) {
    uni.showToast({
      title: '请填写意见建议',
      icon: 'none'
    })
    return false
  }
  
  if (formData.content.length < 10) {
    uni.showToast({
      title: '意见建议至少需要10个字符',
      icon: 'none'
    })
    return false
  }
  
  return true
}

// 提交反馈
const handleSubmit = async () => {
  if (!validateForm()) {
    return
  }
  
  uni.showLoading({
    title: '提交中...',
    mask: true
  })
  
  try {
    // 模拟提交API调用
    await submitFeedback()
    
    uni.hideLoading()
    
    uni.showModal({
      title: '提交成功',
      content: '感谢您的反馈，我们会认真处理您的意见建议！',
      showCancel: false,
      success: () => {
        // 清空表单
        formData.phone = ''
        formData.content = ''
        uploadedImages.value = []
        
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      }
    })
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: error.message || '提交失败，请重试',
      icon: 'none'
    })
  }
}

// 模拟提交API
const submitFeedback = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟成功
      resolve({
        code: 200,
        message: '提交成功'
      })
    }, 2000)
  })
}
</script>

<style scoped>
.comment-container {
  min-height: 100vh;
  background: #f5f6fa;
}

/* 顶部导航 */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  padding-top: calc(var(--status-bar-height) + 20rpx);
  background: #ffffff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f8f9fa;
}

.back-icon {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.nav-placeholder {
  width: 60rpx;
}

/* 主要内容 */
.main-content {
  padding: 30rpx;
}

/* 表单区域 */
.form-section {
  margin-bottom: 40rpx;
}

.form-label {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.label-text {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.label-desc {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

/* 输入框 */
.input-group {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 0 24rpx;
  border: 2rpx solid #e5e5e5;
  transition: border-color 0.3s ease;
}

.input-group:focus-within {
  border-color: #667eea;
  background: #ffffff;
  box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
}

.input-field {
  width: 100%;
  height: 88rpx;
  font-size: 28rpx;
  color: #333;
  border: none;
  background: transparent;
}

.input-field::placeholder {
  color: #999;
}

/* 文本域 */
.textarea-group {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  border: 2rpx solid #f0f0f0;
  transition: border-color 0.3s ease;
  position: relative;
}

.textarea-group:focus-within {
  border-color: #007aff;
}

.textarea-field {
  width: 100%;
  min-height: 200rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  border: none;
  background: transparent;
}

.textarea-field::placeholder {
  color: #999;
}

.char-count {
  position: absolute;
  bottom: 16rpx;
  right: 24rpx;
}

.count-text {
  font-size: 24rpx;
  color: #999;
}

/* 上传区域 */
.upload-section {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  border: 2rpx solid #f0f0f0;
}

.uploaded-images {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.image-item {
  position: relative;
  width: 160rpx;
  height: 160rpx;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 40rpx;
  height: 40rpx;
  background: #ff4757;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.3);
}

.delete-icon {
  font-size: 24rpx;
  color: #ffffff;
  font-weight: bold;
}

.upload-btn {
  width: 160rpx;
  height: 160rpx;
  border: 2rpx dashed #ddd;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  transition: all 0.3s ease;
}

.upload-btn:active {
  background: #f0f0f0;
  border-color: #007aff;
}

.upload-icon {
  font-size: 48rpx;
  margin-bottom: 8rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #666;
}

/* 提交按钮 */
.submit-section {
  margin-top: 60rpx;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: #007aff;
  border: none;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
}

.submit-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
}

.btn-disabled {
  background: #ccc !important;
  box-shadow: none !important;
}

.btn-text {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
}
</style>